<!DOCTYPE HTML>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
        <title>用户登录-市场摊位租赁竞拍系统</title>
        <script type="text/javascript" th:src="@{/asserts/js/jQuery-3.6.0.js}"></script>
        <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/reset.css}"/>
        <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/global.css}"/>
        <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/web.css}"/>
        <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/k15.css}"/>

    </head>

    <body class="W-body" >
    <div class="in-wrap" style=" height: 720px ; background: url(../asserts/img/beijing3.jpeg) no-repeat ;background-size: 100%; ">
        <header id="header" style="height: 80px; padding: 10px 0">
            <h1 id="logo" style="margin-left: 100px" >
                <a href="" title="市场摊位租赁竞拍">
                    <img th:src="@{/asserts/img/logo.jpg}" width="40%"  alt="市场摊位租赁竞拍">
                </a>
                <h2 style="float: left;margin-left: -80px;margin-top: 20px">
                    市场摊位租赁/拍卖交易平台
                    <span style="color: darksalmon">&nbsp;&nbsp;&nbsp;欢迎登录</span>
                </h2>
            </h1>
            <i style="float: right; margin-right: 100px;margin-top: 50px">
                <a href="javascript:void(0)" onclick="showLogin()" title="登录" style="text-decoration: none;">
                    <em class="icon18 login-icon">&nbsp;</em><span class="vam ml5" style="font-size: 16px ; color: #666" >登录</span>
                </a>
                <a href="javascript:void(0)" onclick="showRegister()" title="注册" style="text-decoration: none;">
                    </em><span class="vam ml5" style="font-size: 16px ; color: #666">注册</span>
                </a>
            </i>

        </header>

        <div id="reg-div" class="bg-fa of"  style="height: 500px; margin-top: 40px;margin-right: 100px">
            <div id="logDiv">
                <p style="font-size: 25px; text-align: center; margin-top: 35px;color: rgb(49,134,176)">用户登录</p>
                <div ><p class="e-l-jy" style="height: 30px"></p></div>
                <p id="errorInfo" th:if="${!#strings.isEmpty(errorInfo)}" th:text="${errorInfo}" style="color: red;padding-left: 100px;font-size: 15px"></p>
                <p id="errorInfo" th:if="${!#strings.isEmpty(info)}" th:text="${info}" style="color: greenyellow;padding-left: 100px;font-size: 15px"></p>

                <!--   登录的表单        -->
                <form id="loginForm" th:action="@{/user/login}" method="post">
                    <div>
                        <ol class="e-login-options" style="height: 220px">
                            <li style="padding-left: 100px">
                                <span style="font-size: 16px ; color: #666">用户名：</span>
                                <input id="u-account-reg" type="text" name="username"  placeholder="请输入用户名" style="width: 250px"/>
                                <span class="msg1" id="message1"></span>
                            </li><br/>
                            <li style="padding-left: 100px">
                                <span style="font-size: 16px ; color: #666">密&nbsp;&nbsp;&nbsp;码：</span>
                                <input id="u-password-reg" type="password" name="password"  placeholder="请输入密码" style="width: 250px"/>
                                <span class="msg1" id="message2"></span>
                            </li><br/>

                            <li style="padding-left: 100px">
                                <input id="u-validatecode-reg" type="text" name="code"  placeholder="请输入验证码" style="width: 250px"/>
                                <a href="javascript:void(0)" onclick="changeCode()" style="display: inline-block;height: 50px;position: relative;top: 18px">
                                    <img th:src="@{/user/captcha}" id="myCode"/>看不清，请换一张
                                </a>

                                <p class="lr-tip-wrap"></p>
                            </li>
                        </ol>
                        <section class="mt20 tac">
                            <input type="button" value="登 录" class="e-login-btn" onclick="loginSubmit()"
                                   style="background-color: rgb(44,192,242);width: 180px;margin-left: 100px;cursor: pointer;" />
                            <input type="reset" value="重 置" class="e-login-btn" onclick="reset1()"
                                   style="background-color: indianred;width: 180px;position: relative; left: 50px;top: -35px;cursor: pointer;" />
                            <a th:href="@{/index/resetPass}" title="忘记密码" style="text-decoration: none; position: relative; left: 190px;top: -55px">
                                </em><span class="vam ml5" style="font-size: 16px ; color: #666">忘记密码</span>
                            </a>
                        </section>
                    </div>
                </form>
            </div>
            <div id="regDiv" style="display: none">
                <p style="font-size: 25px; text-align: center; margin-top: 35px;color: rgb(49,134,176)">用户注册</p>
                <div ><p class="e-l-jy" style="height: 30px"></p></div>

                <!--   注册的表单         -->
                <form id="registerForm" th:action="@{/user/register}" method="post">
                    <div>
                        <ol class="e-login-options" style="height: 220px">
                            <li style="padding-left: 100px">
                                <span style="font-size: 16px ; color: #666">用户名：</span>
                                <input id="username" type="text" name="username"  placeholder="请输入用户名" style="width: 250px;margin-left: 16px"/>
                                <span class="msg1" id="message3"></span>
                            </li><br/>
                            <li style="padding-left: 100px">
                                <span style="font-size: 16px ; color: #666">密&nbsp;&nbsp;&nbsp;码：</span>
                                <input id="password" type="password" name="password"  placeholder="请输入密码" style="width: 250px;margin-left: 17px"/>
                                <span class="msg1" id="message4"></span>
                            </li><br/>
                            <li style="padding-left: 100px">
                                <span style="font-size: 16px ; color: #666">重输密码：</span>
                                <input id="password2" type="password"  placeholder="请输入确认密码" style="width: 250px"/>
                                <span class="msg1" id="message5"></span>
                            </li><br/>
                            <li style="padding-left: 100px">
                                <span style="font-size: 16px ; color: #666">电&nbsp;&nbsp;&nbsp;话：</span>
                                <input id="tell" type="text" name="cellphone"  placeholder="请输入联系电话" style="width: 250px;margin-left: 18px"/>
                                <span class="msg1" id="message6"></span>
                            </li><br/>
                            <li style="padding-left: 100px">
                                <span style="font-size: 16px ; color: #666">邮&nbsp;&nbsp;&nbsp;箱：</span>
                                <input id="email" type="text" name="email"  placeholder="请输入邮箱" style="width: 250px;margin-left: 18px"/>
                                <span class="msg1" id="message7"></span>
                            </li><br/><br/>

                        </ol>
                        <section class="tac" style="margin-top: 110px">
                            <input type="button" value="注 册" class="e-login-btn" onclick="registerSubmit()"
                                   style="background-color: rgb(44,192,242);width: 200px;margin-left: 100px;cursor: pointer" />
                            <input type="reset" value="重 置" class="e-login-btn" onclick="reset1()"
                                   style="background-color: indianred;width: 200px;margin-left: 100px;position: relative; left: 250px;top: -35px;cursor: pointer" />
                        </section>
                    </div>
                </form>
            </div>


            <script >
                function changeCode() {
                    let img = document.getElementById("myCode");
                    img.src = "/user/captcha?t="+new Date().valueOf(); //传递一个参数 时间的毫秒数 保证每次发送的请求 具有唯一性
                }
                function showLogin(){
                    document.getElementById('logDiv').style.display='';
                    document.getElementById('regDiv').style.display='none';
                }
                function showRegister(){
                    document.getElementById('logDiv').style.display='none';
                    document.getElementById('regDiv').style.display='';
                }
                // 表单重置
                function reset1(){
                    var msg1 = document.getElementsByClassName("msg1");
                    for(var i = 0; i < msg1.length; i++) {
                        msg1[i].innerHTML = "";
                    }
                    document.getElementById("errorInfo").innerHTML="";
                }
                // 登录提交
                function loginSubmit(){
                    if(checkUser() && checkPassword() ) {
                        $("#loginForm").submit();
                    } else {
                        return false;
                    }
                }
                // 登录的表单验证-用户名
                function checkUser() {
                    var user = document.getElementById("u-account-reg");
                    var regs = /^[a-zA-Z0-9\u4e00-\u9fa5_]{3,18}$/;
                    var message = document.getElementById("message1")
                    if(regs.test(user.value)) {
                        message.style.color = "greenyellow";
                        message.innerHTML = "✔";
                        return true;
                    } else {
                        message.style.color = "red";
                        message.innerHTML = "请输入3-18位中英文用户名！";
                        return false;
                    }
                }
                // 登录的表单验证-密码
                function checkPassword() {
                    var pass = document.getElementById("u-password-reg");
                    var regs = /^[a-zA-Z0-9_]{3,12}$/;
                    var message = document.getElementById("message2")
                    if(regs.test(pass.value)) {
                        message.style.color = "greenyellow";
                        message.innerHTML = "✔";
                        return true;
                    } else {
                        message.style.color = "red";
                        message.innerHTML = "请输入3-12位中英文密码！";
                        return false;
                    }
                }

                // 注册提交
                function registerSubmit(){
                    if(checkUser2()  && checkPassword2() && checkPasswordTwo() && checkTell() && checkEmail() && checkName()) {
                        console.log(111222)
                        $("#registerForm").submit();


                    } else {
                        return false;
                    }
                }
                function checkName(){
                    var user = document.getElementById("username");
                     let url = "/user/checkName?username="+user.value;
                    var message = document.getElementById("message3");
                    var flag = null;
                    $.ajaxSettings.async = false;
                    $.get(url,function (data){
                        console.log(data+"-----data")
                        if(data == 0){
                            message.style.color = "greenyellow";
                            message.innerHTML = "✔";
                            flag =  true;
                        } else {
                            message.style.color = "red";
                            message.innerHTML = "用户名太受欢迎，请更换用户名！";
                            flag =  false;
                        }
                    })
                    console.log("falg="+flag)
                    return flag;
                    /*
                    $.ajax({
                        type:'get',
                        async:false,//要设置为同步的，要不CheckName的返回值永远为null
                        url:'/user/checkName',
                        data:{username:user.value},
                        success:function(data){
                            console.log(data+"-----data")
                            if(data == 0){
                                message.style.color = "greenyellow";
                                message.innerHTML = "✔";
                                flag =  true;
                            } else {
                                message.style.color = "red";
                                message.innerHTML = "用户名太受欢迎，请更换用户名！";
                                flag =  false;
                            }
                        }});
                    console.log("falg="+flag)
                    return flag;
                     */
                }
                function checkUser2() {
                    var user = document.getElementById("username");
                    var regs = /^[a-zA-Z0-9\u4e00-\u9fa5_]{3,18}$/;
                    var message = document.getElementById("message3")
                    if(regs.test(user.value)) {
                        message.style.color = "greenyellow";
                        message.innerHTML = "✔";
                        return true;
                    } else {
                        message.style.color = "red";
                        message.innerHTML = "请输入3-18位中英文用户名！";
                        return false;
                    }
                }

                function checkPassword2() {
                    var pass = document.getElementById("password");
                    var regs = /^[a-zA-Z0-9_]{3,12}$/;
                    var message = document.getElementById("message4")
                    if(regs.test(pass.value)) {
                        message.style.color = "greenyellow";
                        message.innerHTML = "✔";
                        return true;
                    } else {
                        message.style.color = "red";
                        message.innerHTML = "请输入3-12位中英文密码！";
                        return false;
                    }
                }
                function checkPasswordTwo() {
                    var pass1 = document.getElementById("password").value;
                    var pass2 = document.getElementById("password2").value;
                    var message = document.getElementById("message5")
                    if(pass1 == pass2 && pass2 != "") {
                        message.style.color = "greenyellow";
                        message.innerHTML = "✔";
                        return true;
                    } else {
                        message.style.color = "red";
                        message.innerHTML = "密码不一致";
                        return false;
                    }
                }
                function checkTell() {
                    var pass = document.getElementById("tell");
                    var regs = /^(0|\+?86|17951)?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;
                    var message = document.getElementById("message6")
                    if(regs.test(pass.value)) {
                        message.style.color = "greenyellow";
                        message.innerHTML = "✔";
                        return true;
                    } else {
                        message.style.color = "red";
                        message.innerHTML = "请输入正确的电话号码格式！";
                        return false;
                    }
                }
                function checkEmail() {
                    var reg = /\w+@\w+\.\w+/;
                    var email = document.getElementById("email").value;
                    var message = document.getElementById("message7");
                    if(reg.test(email)) {
                        message.style.color = "greenyellow";
                        message.innerHTML = "✔";
                        return true;
                    } else {
                        message.style.color = "red";
                        message.innerHTML = "邮箱格式错误，必须包含 @ 和 . ";
                        return false;
                    }
                }
                //





            </script>
        </div>
    </div>
<!--    &lt;!&ndash; 公共底引入 &ndash;&gt;-->
<!--    <footer th:replace="~{commons/tag::footBar}"></footer>-->
    </div>
    </body>
</html>
